<template>
  <div>
    <Nav></Nav>
    <div class="mycontent">
      <div class="header">
        <span :class="{ active: detail.top }">顶置</span>
        <h5>{{ detail.title }}</h5>
        <ul>
          <li>发布于 3 个月前</li>
          <li>作者 {{ authotName.loginname }}</li>
          <li>{{ detail.visit_count }} 次浏览</li>
          <li>来自 {{ detail.tab }}</li>
        </ul>
      </div>
      <div v-html="detail.content"></div>
    </div>
    <div class="reply">
      <div class="top">
        <span>{{ replies.length }} 回复</span>
      </div>
      <div class="replys" v-for="(repaly, index) in replies" :key="index">
        <div class="leftcontent" style="float: left; margin-right: 20px">
          <img
            :src="repaly.author.avatar_url"
            style="width: 40px; height: 40px"
          />
        </div>
        <div class="rightcontent">
          <span>{{ repaly.author.loginname }}</span
          ><i>{{ index + 1 }}楼•</i
          ><i>{{ replayDated(repaly.create_at) }}前</i>
          <h6 v-html="repaly.content"></h6>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      author_id: "",
      detail: {},
    };
  },
  computed: {
    authotName() {
      //这里默认初值，不影响渲染，不给初值去获取数据就会出错 因为请求是异步加载 所以第一次页面挂载的时候对象里面没有改属性 vue的最大特性就是页面及时更新 所以不影响使用
      return this.detail.author || {};
    },
    // //回复总数量
    // replyCount() {
    //   return this.detail.replies.length ;
    // },
    //回复
    replies() {
      return this.detail.replies || [];
    },
    //回复日期
    replayDated() {
      return (create_at) => {
        let oldDate = Date.parse(create_at);
        let newDate = new Date().getTime();
        // console.log(newDate, oldDate);
        let hour = Math.floor((newDate - oldDate) / 1000 / 60 / 60 );
        let day = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24);
        let mouth = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30);
        let year = Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30 / 12);
        return hour <=24 ? hour+'小时' : day<=30 ? day+'天' : mouth<=12? mouth+'个月' : year+'年';
      };
    },
  },
  mounted() {
    // console.log(this.$route);
    this.author_id = this.$route.params.author_id;
    this.$API
      .reqGetDetail(this.author_id)
      .then((res) => {
        this.detail = res.data;
        // console.log(res.data.content);
      })
      .catch((err) => console.error("获取详情失败"));
  },
};
</script>

<style >
h5 {
  display: inline-block;
}
ul {
  clear: both;
}
li {
  float: left;
  font-size: 14px;
  list-style: outside;
  color: rgb(131, 131, 131);
  margin-right: 20px;
}
.mycontent {
  width: 80%;
  margin: 20px auto;
  background: rgb(255, 255, 255);
  padding: 20px;
  border-radius: 5px;
}
.active {
  border-radius: 3px;
  padding: 3px;
  background-color: rgb(128, 189, 1);
  color: rgb(255, 255, 255);
}
.header {
  border-bottom: 1px solid rgb(229, 229, 229);
  padding: 10px 10px 20px 10px;
  margin-bottom: 20px;
}
.markdown-text img {
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
.markdown-text a {
  text-decoration: none;
  color: rgb(0, 136, 204);
}
.markdown-text h2 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.reply {
  width: 80%;
  margin: 20px auto;
  background: rgb(255, 255, 255);
  border-radius: 5px;
}
.reply .top {
  width: 100%;
  padding: 10px 15px 10px 15px;
  background: rgb(246, 246, 246);
}
.reply .top span {
  font-size: 14px;
  font-weight: bold;
}
.reply .replys {
  width: 100%;
  padding: 10px 15px 10px 15px;
  background: rgb(255, 255, 255);
}
.reply .replys .rightcontent {
}
.reply .replys .rightcontent span {
  font-size: 12px;
  font-weight: bold;
  color: rgb(102, 102, 102);
}
.reply .replys .rightcontent i {
  font-style: normal;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 12px;
  color: rgb(0, 136, 204);
}
.reply .replys .rightcontent h6 {
  margin-left: 10px;
  font-size: 14px;
}
</style>